<template>
	<view>
		<view class="app">
			<view class="content">
				<map
					name=""
					id="map1"
					ref="map1"
					style="width: 750px;height: 90vh;"
					:layer-style="5"
					:show-location="true"
					:latitude="latitude"
					:longitude="longitude"
					:markers="marker"
					:scale="scale"
					:circles="circles"
					@markertap="markertap"
					@callouttap="callouttap"
					:polyline="polyline"
				>
					<!-- 搜索框 -->
					<view
						class=""
						:style="{
							position: 'absolute',
							left: '32rpx',
							top: navHeight + 'px'
						}"
					>
						<u-search
							searchIconSize="38"
							search-icon="/static/img/index/avatar.png"
							customStyle="width: 586rpx;height: 84rpx;ackground: #FFF;border-radius: 42rpx 42rpx 42rpx 42rpx;opacity: 1"
							:height="42"
							:showAction="false"
							placeholder="在此处搜索"
							v-model="keyword"
							:clearabled="true"
							searchIconColor="#7d7d7d"
							bgColor="#ffffff"
						></u-search>
					</view>
					<!-- 加号 -->
					<view
						class=""
						:style="{
							position: 'absolute',
							left: '87vw',
							top: navHeight + 'px'
						}"
					>
						<view class="" class="flex-cen" style="width: 84rpx;height: 84rpx;border-radius: 50%;background-color: #FFF;">
							<image src="" mode="" src="../../static/img/index/sizijia.svg" mode="" style="width: 40rpx;height: 40rpx;"></image>
						</view>
					</view>
					<!-- tagbs -->
					<view
						class="tabs"
						:style="{
							position: 'absolute',
							left: '32rpx',
							top: '240rpx'
						}"
					>
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
							<view class="scroll-view-item_H uni-bg-red" v-for="(item, index) in tabsList" :key="index">
								<view class="item">
									<view class="flex">
										<view class="tp"><image :src="item.url" mode="" style="width: 26rpx;height: 26rpx;"></image></view>
										<view class="name">
											<view class="url">{{ item.name }}</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 蓝牙通知 -->
					<view
						class=""
						:style="{
							position: 'absolute',
							left: '32rpx',
							top: '500px'
						}"
					>
						<view class="blueTouch">
							<view class="flex">
								<view class="item mr12 flex-cen">
									<view class="">
										<image src="/static/img/index/blueTouch.svg" mode="" style="width: 38rpx;height: 32rpx;"></image>
										<view class="text">未连接</view>
									</view>
								</view>
								<view class="item flex-cen">
									<image src="/static/img/index/bell.svg" mode="" style="width: 40rpx;height: 46rpx;"></image>
									<view class="flex-c"></view>
								</view>
							</view>
						</view>
					</view>
					<!-- 定位 -->
					<view
						class=""
						:style="{
							position: 'absolute',
							left: '87vw',
							top: '500px'
						}"
					>
						<view class="" class="flex-cen" style="width: 84rpx;height: 84rpx;border-radius: 50%;background-color: #FFF;">
							<image src="" mode="" src="../../static/img/index/message.svg" mode="" style="width: 48rpx;height: 38rpx;"></image>
						</view>
					</view>
					<view
						class=""
						:style="{
							position: 'absolute',
							left: '87vw',
							top: '550px'
						}"
					>
						<view class="" class="flex-cen" style="width: 84rpx;height: 84rpx;border-radius: 50%;background-color: #FFF;">
							<image src="" mode="" src="../../static/img/index/gps.svg" mode="" style="width: 48rpx;height: 48rpx;"></image>
						</view>
					</view>
				</map>

				<!-- 弹框 -->
				<view class="">
					<bab-Touchbox>
						<!-- tabs -->
						<view class=""><u-tabs :list="list1" @click="click"></u-tabs></view>
						<!-- scroll-view -->
						<view class="">
							<scroll-view scroll-y="true" style="height: 900rpx;">
								<view v-for="(item, index) in 20">{{ index }}</view>
							</scroll-view>
						</view>
					</bab-Touchbox>
				</view>

				<!-- 底部 -->
				<tabbar></tabbar>
			</view>
		</view>
	</view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
// var navHeight = getApp().globalData.navHeight + 'px';
export default {
	data() {
		return {
			/* tabs */
			list1: [
				{
					name: '关注'
				},
				{
					name: '推荐'
				},
				{
					name: '电影'
				},
				{
					name: '科技'
				},
				{
					name: '音乐'
				},
				{
					name: '美食'
				},
				{
					name: '文化'
				},
				{
					name: '财经'
				},
				{
					name: '手工'
				}
			],

			/* 搜素框 */
			keyword: '',
			/* 分类 */
			tabsList: [
				{
					name: '家庭',
					url: '/static/img/index/people.svg'
				},
				{
					name: '推荐',
					url: '/static/img/index/hot.svg'
				},
				{
					name: '商圈',
					url: '/static/img/index/package.svg'
				},
				{
					name: '交友',
					url: '/static/img/index/chat.svg'
				},
				{
					name: '--',
					url: '/static/img/index/cafe.svg'
				},
				{
					name: '--',
					url: '/static/img/index/cafe.svg'
				},
				{
					name: '--',
					url: '/static/img/index/cafe.svg'
				},
				{
					name: '--',
					url: '/static/img/index/cafe.svg'
				}
			],

			/* 状态栏高度 */
			statusBarHeight: statusBarHeight,
			/* 胶囊高度 */
			navHeight: 0,
			/* 地图 */
			latitude: 23.106574, //纬度
			longitude: 113.324587, //经度
			nowLatitude: 0,
			nowLongitude: 0,
			scale: 13, //缩放级别
			bottomData: false,
			marker: [
				{
					id: 0,
					latitude: 23.13065, //纬度
					longitude: 113.3274, //经度
					iconPath: '', //显示的图标
					rotate: 0, // 旋转度数
					width: 20, //宽
					height: 30, //高
					//   title:'我在这里',//标注点名
					alpha: 0.5, //透明度
					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: '天宝大厦', //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 15, //边框圆角
						borderWidth: '10',
						bgColor: '#9f5bfa', //背景颜色
						display: 'ALWAYS' //常显
					}
				},
				{
					id: 0,
					latitude: 23.13065, //纬度
					longitude: 113.3274, //经度
					iconPath: '', //显示的图标
					rotate: 0, // 旋转度数
					width: 20, //宽
					height: 30, //高
					//   title:'我在这里',//标注点名
					alpha: 0.5, //透明度
					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: '天宝大厦', //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 15, //边框圆角
						borderWidth: '10',
						bgColor: '#9f5bfa', //背景颜色
						display: 'ALWAYS' //常显
					}
				},
				{
					id: 1,
					latitude: 23.106574, //纬度
					longitude: 113.324587, //经度
					iconPath: '', //显示的图标
					rotate: 0, // 旋转度数
					width: 20, //宽
					height: 30, //高
					//  title:'我在这里',//标注点名
					alpha: 0.5, //透明度
					//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
					//   color:'red',//文本颜色
					//      },
					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: '广州塔', //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 15, //边框圆角
						borderWidth: '10',
						bgColor: '#9f5bfa', //背景颜色
						display: 'ALWAYS' //常显
					}
				},
				{
					id: 2,
					latitude: 23.1338, //纬度
					longitude: 113.33052, //经度
					iconPath: '', //显示的图标
					rotate: 0, // 旋转度数
					width: 20, //宽
					height: 30, //高
					alpha: 0.5, //透明度
					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: '德隆大厦', //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 15, //边框圆角
						borderWidth: '10',
						bgColor: '#9f5bfa', //背景颜色
						display: 'ALWAYS' //常显
					}
				},
				{
					id: 3,
					latitude: 23.136455, //纬度
					longitude: 113.329002, //经度
					iconPath: '', //显示的图标
					rotate: 0, // 旋转度数
					width: 20, //宽
					height: 30, //高
					alpha: 0.5, //透明度
					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: '羊城国际商贸中心', //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 15, //边框圆角
						borderWidth: '10',
						bgColor: '#9f5bfa', //背景颜色
						display: 'ALWAYS' //常显
					}
				},
				{
					id: 4,
					latitude: 23.224781, //纬度
					longitude: 113.293911, //经度
					iconPath: '', //显示的图标
					rotate: 0, // 旋转度数
					width: 20, //宽
					height: 30, //高
					alpha: 0.5, //透明度
					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: '天瑞广场A座', //文本
						color: '#ffffff', //文字颜色
						fontSize: 16, //文本大小
						borderRadius: 15, //边框圆角
						borderWidth: '12',
						bgColor: '#9f5bfa', //背景颜色
						display: 'ALWAYS' //常显
					}
				},
				{
					id: 5,
					latitude: 23.072726, //纬度
					longitude: 113.277921, //经度
					iconPath: '/static/img/index/54171.png', //显示的图标
					rotate: 0, // 旋转度数
					width: 55, //宽
					height: 70, //高
					alpha: 1, //透明度
					controls: [
						{
							//在地图上显示控件，控件不随着地图移动
							id: 31, //控件id
							iconPath: '/static/logo.png', //显示的图标
							position: {
								//控件在地图的位置
								left: 50,
								top: 50,
								width: 55,
								height: 70
							}
						}
					]
				}
			],
			circles: [
				{
					//在地图上显示圆
					latitude: 40.013,
					longitude: 118.685,
					fillColor: '#000', //填充颜色
					color: '#0016ca', //描边的颜色
					radius: 20, //半径
					strokeWidth: 2 //描边的宽度
				}
			],
			polyline: [
				{
					//指定一系列坐标点，从数组第一项连线至最后一项
					points: [
						{
							latitude: 23.13065,
							longitude: 113.3274
						},
						{
							latitude: 23.106574,
							longitude: 113.324587
						}
					],
					color: '#A054FE', //线的颜色
					width: 4, //线的宽度
					dottedLine: false, //是否虚线
					arrowLine: true //带箭头的线 开发者工具暂不支持该属性
				}
			]
		};
	},
	onShow() {
		console.log(getApp().globalData);
		console.log(getApp().globalData.navHeight, 'getApp().globalData.navHeight');
		this.navHeight = getApp().globalData.navHeight;
	}
};
</script>

<style lang="scss">
.blueTouch {
	.item {
		width: 82rpx;
		height: 82rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
	}
	.flex {
		image {
		}
		.text {
			// width: 36rpx;
			height: 16rpx;
			font-size: 12rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #31312f;
			// line-height: 0rpx;
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
		}
	}
}

/* tabs */
.scroll-view_H {
	white-space: nowrap;
	width: 750rpx;
	.scroll-view-item_H {
		display: inline-block;
		width: 152rpx;
		height: 58rpx;
		line-height: 58rpx;
		background: #ffffff;
		// box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		opacity: 1;
		margin-left: 14rpx;
	}
	.item {
		.tp {
			padding-left: 14rpx;
		}
		.name {
			margin-left: 14rpx;
		}
	}
}
</style>
